
<div>
    <h3 class="header smaller lighter blue">
        <a href="/#/cluster_list">Cluster List</a>
        <span> > </span>
        <a href="/#/cluster_list?clusterName={{clusterName}}">{{clusterName}}</a>
        <span> > </span>
        <span>Cluster Routes</span>
    </h3>
    <div>
        <div style="height:35px">
            <ul style="float:left" class="nav nav-tabs padding-18 tab-size-bigger" ng-if="dcs && dcs.length">
                <li ng-repeat="dc in dcs" ng-class="{'active': currentDcName == dc.dcName}">
                    <a ng-click="switchDc(dc)" data-toggle="tab">
                        {{dc.dcName}}
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content" ng-if="dcs && dcs.length">
            <div>
                <div class="panel panel-primary" style="margin-top: 15px;">
                    <header class="panel-heading">
                        <div class="row">
                            <div class="col-md-6">集群使用中路由</div>
                        </div>
                    </header>

                    <table class="table table-striped table-hover">
                        <thead ng-if="usedRoutes && usedRoutes.length">
                            <tr>
                                <th>Route_id</th>
                                <th>cluster_type</th>
                                <th>org_name</th>
                                <th>public</th>
                                <th>src_dcName</th>
                                <th>src_proxies</th>
                                <th>optional_info</th>
                                <th>dst_dcName</th>
                                <th>dst_proxies</th>
                                <th>desc</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="usedRoute in usedRoutes">
                            <td >{{usedRoute.id}}</td>
                            <td filter="{clusterType: 'select'}" filter-data="clusterTypes" ng-bind="getTypeName(usedRoute.clusterType)"></td>
                            <td filter="{ orgName: 'text'}" sortable="'orgName'" ng-bind="usedRoute.orgName"></td>
                            <td style= "margin: 0pt 0cm 0pt 0cm;" class="{{usedRoute.public == true ? 'glyphicon glyphicon-ok-sign green' : 'glyphicon glyphicon-remove-sign red'}}"></td>
                            <td ng-bind="usedRoute.srcDcName"> </td>
                            <td >
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in usedRoute.srcProxies">{{proxy}}</p>
                                </span>
                            </td>
                            <td >
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in usedRoute.optionalProxies">{{proxy}}</p>
                                </span>
                            </td>
                            <td ng-bind="usedRoute.dstDcName"></td>
                            <td>
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in usedRoute.dstProxies">{{proxy}}</p>
                                </span>
                            </td>
                            <td ng-bind="usedRoute.description"></td>
                        </tr>

                        </tbody>
                    </table>
                    <p ng-if="(!usedRoutes || !usedRoutes.length)">
                        无集群使用中路由
                    </p>
                </div>
            </div>

            <div>
                <div class="panel panel-primary" style="margin-top: 15px;">
                    <header class="panel-heading">
                        <div class="row">
                            <div class="col-md-6">集群粒度路由</div>
                            <div class="col-md-6 text-right">
                                <a class="btn btn-primary btn-sm" href="/#/cluster_designated_routes_update?clusterName={{clusterName}}&srcDcName={{currentDcName}}">编辑</a>
                            </div>
                        </div>
                    </header>
                    <table class="table table-striped table-hover">
                        <thead ng-if="designatedRoutes && designatedRoutes.length">
                        <tr>
                            <th>Route_id</th>
                            <th>cluster_type</th>
                            <th>org_name</th>
                            <th>public</th>
                            <th>src_dcName</th>
                            <th>src_proxies</th>
                            <th>optional_info</th>
                            <th>dst_dcName</th>
                            <th>dst_proxies</th>
                            <th>desc</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="designatedRoute in designatedRoutes">
                            <td >{{designatedRoute.id}}</td>
                            <td filter="{clusterType: 'select'}" filter-data="clusterTypes" ng-bind="getTypeName(designatedRoute.clusterType)"></td>
                            <td filter="{ orgName: 'text'}" sortable="'orgName'" ng-bind="designatedRoute.orgName"></td>
                            <td style= "margin: 0pt 0cm 0pt 0cm;" class="{{designatedRoute.public == true ? 'glyphicon glyphicon-ok-sign green' : 'glyphicon glyphicon-remove-sign red'}}"></td>
                            <td ng-bind="designatedRoute.srcDcName"> </td>
                            <td >
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in designatedRoute.srcProxies">{{proxy}}</p>
                                </span>
                            </td>
                            <td >
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in designatedRoute.optionalProxies">{{proxy}}</p>
                                </span>
                            </td>
                            <td ng-bind="designatedRoute.dstDcName"></td>
                            <td>
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in designatedRoute.dstProxies">{{proxy}}</p>
                                </span>
                            </td>
                            <td ng-bind="designatedRoute.description"></td>
                        </tr>

                        </tbody>
                    </table>
                    <p ng-if="(!designatedRoutes || !designatedRoutes.length)">无集群粒度路由</p>
                </div>
            </div>

            <div>
                <div>
                    <div class="panel panel-primary" style="margin-top: 15px;">
                        <header class="panel-heading">
                            <div class="row">
                                <div class="col-md-6">集群默认路由</div>
                            </div>
                        </header>

                        <table class="table table-striped table-hover">
                            <thead ng-if="defaultRoutes && defaultRoutes.length">
                            <tr>
                                <th>Route_id</th>
                                <th>cluster_type</th>
                                <th>org_name</th>
                                <th>public</th>
                                <th>src_dcName</th>
                                <th>src_proxies</th>
                                <th>optional_info</th>
                                <th>dst_dcName</th>
                                <th>dst_proxies</th>
                                <th>desc</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="defaultRoute in defaultRoutes">
                                <td >{{defaultRoute.id}}</td>
                                <td filter="{clusterType: 'select'}" filter-data="clusterTypes" ng-bind="getTypeName(defaultRoute.clusterType)"></td>
                                <td filter="{ orgName: 'text'}" sortable="'orgName'" ng-bind="defaultRoute.orgName"></td>
                                <td style= "margin: 0pt 0cm 0pt 0cm;" class="{{defaultRoute.public == true ? 'glyphicon glyphicon-ok-sign green' : 'glyphicon glyphicon-remove-sign red'}}"></td>
                                <td ng-bind="defaultRoute.srcDcName"> </td>
                                <td >
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in defaultRoute.srcProxies">{{proxy}}</p>
                                </span>
                                </td>
                                <td >
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in defaultRoute.optionalProxies">{{proxy}}</p>
                                </span>
                                </td>
                                <td ng-bind="defaultRoute.dstDcName"></td>
                                <td>
                                <span>
                                    <p align="left" style= "margin: 0cm 0cm 0pt 0pt;" ng-repeat="proxy in defaultRoute.dstProxies">{{proxy}}</p>
                                </span>
                                </td>
                                <td ng-bind="defaultRoute.description"></td>
                            </tr>
                            </tbody>
                        </table>
                        <p ng-if="(!defaultRoutes || !defaultRoutes.length)">
                            无集群默认路由
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
